<template>
  <div class="error-page">
    <section >
      <div class="container ">

        <section class="error-wrapper text-center">
          <h1><img alt="" src="@/assets/404_images/404-error.png"></h1>
          <h2>page not found</h2>
          <h3>We Couldn’t Find This Page</h3>
          <a class="back-btn" href="/home"> Back To Home</a>
        </section>

      </div>
    </section>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "4042"
}
</script>

<style scoped>
.error-page {
  background: #6bc5a4;
  width: 100%;
  height: 100vh;
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
}
.error-wrapper {
  padding-top: 10%;
}

.error-wrapper h2 {
  font-size: 64px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.error-wrapper h3 {
  font-size: 32px;
  color: #474747;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 30px;
  margin-top: 0;
}

.error-wrapper .nrml-txt {
  font-size: 18px;
  color: #474747;
  font-weight: normal;
  line-height: 30px;
}

.error-wrapper .nrml-txt a {
  color: #a7ffdf;
}

.error-wrapper .back-btn {
  color: #fff;
  border: 1px solid #fff;
  padding: 15px 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 20px;
  margin-top: 50px;

}

.error-wrapper .back-btn:hover {
  background: #fff;
  color: #6bc5a4;
  border-color: #fff;
}

</style>